<!--
官网：https://github.com/DIYgod/DPlayer
参数
    名称	默认值	描述
    container	document.querySelector('.dplayer')	播放器容器元素
    live	false	开启直播模式
    autoplay	false	视频自动播放
    theme	'#b7daff'	主题色
    loop	false	视频循环播放
    lang	navigator.language.toLowerCase()	可选值: 'en', 'zh-cn', 'zh-tw'
    screenshot	false	开启截图，如果开启，视频和视频封面需要开启跨域
    hotkey	true	开启热键
    preload	'auto'	预加载，可选值: 'none', 'metadata', 'auto'
    volume	0.7	默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
    logo	-	在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
    apiBackend	-	自定义获取和发送弹幕行为，详情
    video	-	视频信息
    video.url	-	视频链接
    video.pic	-	视频封面
    video.thumbnails	-	视频缩略图，可以使用 DPlayer-thumbnails 生成
    video.type	'auto'	可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型
    video.customType	-	自定义类型
    subtitle	-	外挂字幕
    subtitle.url	required	字幕链接
    subtitle.type	'webvtt'	字幕类型，可选值: 'webvtt', 'ass'，目前只支持 webvtt
    subtitle.fontSize	'20px'	字幕字号
    subtitle.bottom	'40px'	字幕距离播放器底部的距离，取值形如: '10px' '10%'
    subtitle.color	'#fff'	字幕颜色
    danmaku	-	显示弹幕
    danmaku.id	required	弹幕池id，必须唯一
    danmaku.api	required	-
    danmaku.token	-	弹幕后端验证 token
    danmaku.maximum	-	弹幕最大数量
    danmaku.addition	-	额外外挂弹幕
    danmaku.user	'DIYgod'	弹幕用户名
    danmaku.bottom	-	弹幕距离播放器底部的距离，防止遮挡字幕，取值形如: '10px' '10%'
    danmaku.unlimited	false	海量弹幕模式，即使重叠也展示全部弹幕，请注意播放器会记忆用户设置，用户手动设置后即失效
    contextmenu	[]	自定义右键菜单
    mutex	true	互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
API
    dp.play()：播放视频
    dp.pause()：暂停视频
    dp.seek(time: number)：跳转到特定时间
    dp.toggle()：切换播放和暂停
    dp.on(event: string, handler: function)：绑定视频和播放器事件
    dp.switchVideo(video, danmaku)：切换到其他视频
    dp.notice(text: string, time: number)：显示通知，时间的单位为毫秒，默认时间2000毫秒，默认透明度0.8
    dp.switchQuality(index: number)：切换清晰度
    dp.destroy()：销毁播放器
    dp.speed(rate: number)：设置视频速度
    dp.volume(percentage: number, nostorage: boolean, nonotice: boolean)：设置视频音量
    dp.video：原生 video
    ----dp.video.currentTime：返回视频当前播放时间
    ----dp.video.duration：返回视频总时间
    ----dp.video.paused：返回视频是否暂停
    事件绑定
    dp.on（event, handler）
    play：DPlayer 开始播放时触发
    pause：DPlayer 暂停时触发
    canplay：在有足够的数据可以播放时触发
    playing：DPlayer 播放时定期触发
    ended：DPlayer 结束时触发
    error：发生错误时触发

    自动播放
      // setTimeout(()=>{
      //   this.dplayer.play();
      // }, 3000)
      // hls.on(Hls.Events.MANIFEST_PARSED, function (){
      //   alert("aaa")
      //   video.play();
      // })
-->
<template>
  <div :id="videoId" :style="styleObject"></div>
</template>

<script>
import Hls from 'hls.js'
import dPlayer from 'dplayer'
import { getGuid } from '@/utils/index'
export default {
  props : {
    videoUrl: {type: String, default: ""},
    width:{type: String, default:"100%"},
    height:{type: String, default:"100%"},
  },
  data() {
    return {
      styleObject:{
        width:this.width,
        height: this.height
      },
      videoId : "v" + getGuid(),
      dplayer : undefined
    };
  },
  watch :{
    videoUrl(newVal, oldVal){
      if(newVal !== ''){
        this.createDPlayer();
      }
    }
  },
  mounted() {
    this.createDPlayer();
  },
  beforeUnmount() {
      if(this.dplayer) this.dplayer.destroy()
  },
  methods:{
    createDPlayer(){
      //创建前销毁播放器
      if(this.dplayer)this.dplayer.destroy()
      let videoObject = {
        container: document.getElementById(this.videoId),//视频容器
        variable:"player",
        live : false,      //是否开启直播模式
        language: 'zh-CN',
        screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
        hotkey: true, // 是否支持热键，调节音量，播放，暂停等
        preload: "auto", // 自动预加载
        autoplay:true,	  //自动播放
        volume:0,
        video: {
          url: this.videoUrl,
          type: "customHls",  //类型
          customType:{
            customHls: function (video, player) {
              const hls = new Hls()
              hls.loadSource(video.src)
              hls.attachMedia(video)
            }
          }
        },
      };
      this.dplayer = new dPlayer(videoObject);  //调用播放器并赋值给变量dplayer
    }
  },
}
</script>

<style scoped>

</style>
